<template lang="html">
  <div id="charts">
    <div id="ugt" :style="{width:'100%',height:'100%'}"></div>
  </div>
</template>

<script>
import co from 'co'
import echarts from 'echarts'
import {HttpResetClass } from 'vue-client'

let getData = function * (self) {
  // let s1 = 't.'
  // let s2 = 'u.'
  // self.replacestr(self.condition,s1)
  // self.replacestr(self.con,s2)
  let load = new HttpResetClass()
  load.load('POST','rs/sql/UsergasType',
  {data: {condition: self.condition}},
  {resolveMsg: null, rejectMsg: null})
  .then((res) => {
    self.texttile = '用户性质'
    let arrparams = []
    let gasdata = []
    let pricedata = []
    for (var i = 0; i < res.data.length; i++) {
        arrparams[i] = "\n" + res.data[i].name
        gasdata[i] = res.data[i].num_value
        pricedata[i] = res.data[i].price_value
    }
    self.set(arrparams,gasdata,pricedata)
  })
}
export default {
  props: ['condition', 'tablename'],
 data () {
   return {
     texttile: '',
     xc: '',
     con: ''
   }
 },
 methods: {
   set (arrparams,gasdata,pricedata) {
     this.xc = echarts.init(document.getElementById('ugt'))
     this.xc.setOption({
       title : {
        //  text: '数量金额散列图'
         text: '' // 由于显示遮盖，将标题去掉
       },
       tooltip : {
         trigger: 'axis'
       },
       legend: {
         data: ['数量','金额']
       },
       toolbox: {
         show : true,
         feature : {
           dataView : {show: true, readOnly: false},
           magicType : {show: true, type: ['line', 'bar']},
           restore : {show: true},
           saveAsImage : {show: true}
         }
       },
       calculable : true,
       grid: {
                    y2: 140
                },
        xAxis: [{
              type: 'category',
              boundaryGap: [0, 0.01],
              name:'',
              data:  arrparams,
              axisLabel:{
                  interval:0,//横轴信息全部显示
                  rotate:-30,//-30度角倾斜显示
                  }
              }],
      yAxis : [
        {
          type : 'value',
          axisLabel: {
            interval:0,//横轴信息全部显示
            rotate:-70//-30度角倾斜显示
          }
        }
      ],
      series : [
        {
          name:'数量',
          type:'bar',
          data:gasdata,
          markPoint : {
            data : [
              {type : 'max', name: '最大值'},
              {type : 'min', name: '最小值'}
            ]
          },
          markLine : {
            data : [
              {type : 'average', name: '平均值'}
            ]
          }
        },
        {
          name:'金额',
          type:'bar',
          data:pricedata,
          markPoint : {
            data : [
              {type : 'max', name: '最大值'},
              {type : 'min', name: '最小值'}
            ]
          },
          markLine : {
          data : [
              {type : 'average', name : '平均值'}
            ]
          }
        }
      ]
     })
   },
   searchdata () {
     let getGen =getData(this)
     co(getGen)
  //  },
  //  replacestr (str,rstr) {
  //    if (str.indexOf(rstr) >= 0) {
  //      this.replacestr(str.replace(rstr, ''), rstr)
  //    } else {
  //      this.con = str
  //    }
   }
 },
 watch: {
   'condition' (val) {
      this.searchdata()

   },
   'tablename' (val) {
     this.searchdata()
   }
 },
 ready () {
   this.searchdata()
 }

}
</script>
<style lang="css">
#charts div{
  height: auto;
}
</style>
